/* 番茄起立 - 治愈系设计系统 */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* 治愈系色彩系统 */
    --cream-bg: 32 24% 97%;
    --tomato-soft: 9 100% 75%;
    --mint-soft: 140 36% 70%;
    --charcoal: 0 0% 29%;
    --white-pure: 0 0% 100%;
    
    /* 语义化颜色 */
    --background: var(--cream-bg);
    --foreground: var(--charcoal);
    --card: var(--white-pure);
    --card-foreground: var(--charcoal);
    
    --primary: var(--tomato-soft);
    --primary-foreground: var(--white-pure);
    --secondary: var(--mint-soft);
    --secondary-foreground: var(--white-pure);
    
    --muted: 32 24% 90%;
    --muted-foreground: 0 0% 50%;
    --accent: var(--mint-soft);
    --accent-foreground: var(--white-pure);
    
    --border: 32 24% 88%;
    --input: 32 24% 92%;
    --ring: var(--tomato-soft);
    
    /* 治愈系圆角系统 */
    --radius: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;
    
    /* 阴影系统 */
    --shadow-soft: 0 4px 15px rgba(0, 0, 0, 0.05);
    --shadow-glow: 0 0 40px rgba(255, 138, 128, 0.2);
    
    /* 动画时序 */
    --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* 渐变系统 */
    --gradient-tomato: linear-gradient(135deg, hsl(var(--tomato-soft)), hsl(9 100% 85%));
    --gradient-mint: linear-gradient(135deg, hsl(var(--mint-soft)), hsl(140 36% 80%));
    --gradient-bg: radial-gradient(circle at top right, hsl(var(--cream-bg)), hsl(32 24% 95%));
    
    /* 治愈系渐变色 */
    --gradient-healing: linear-gradient(135deg, hsl(var(--mint-soft)) 0%, hsl(var(--tomato-soft)) 100%);
    --gradient-gentle: linear-gradient(180deg, hsl(var(--background)) 0%, hsl(var(--cream-bg)) 100%);
    --gradient-warm: linear-gradient(135deg, hsl(15 100% 92%) 0%, hsl(25 90% 88%) 50%, hsl(35 85% 85%) 100%);
    --gradient-cool: linear-gradient(135deg, hsl(180 30% 85%) 0%, hsl(200 40% 80%) 100%);
    --gradient-primary-soft: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--mint-soft)) 100%);
    
    /* 治愈系阴影 */
    --shadow-healing: 0 8px 32px -8px hsl(var(--tomato-soft) / 0.3);
    --shadow-gentle: 0 4px 20px -4px hsl(var(--mint-soft) / 0.25);
    --shadow-warm: 0 10px 40px -10px hsl(25 60% 70% / 0.4);

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --cream-bg: 220 13% 8%;
    --tomato-soft: 9 100% 65%;
    --mint-soft: 140 36% 60%;
    --charcoal: 0 0% 85%;
    --white-pure: 220 13% 12%;
    
    --background: var(--cream-bg);
    --foreground: var(--charcoal);
    --card: var(--white-pure);
    --card-foreground: var(--charcoal);
    
    --primary: var(--tomato-soft);
    --primary-foreground: 220 13% 8%;
    --secondary: var(--mint-soft);
    --secondary-foreground: 220 13% 8%;
    
    --muted: 220 13% 15%;
    --muted-foreground: 0 0% 60%;
    --accent: var(--mint-soft);
    --accent-foreground: 220 13% 8%;
    
    --border: 220 13% 20%;
    --input: 220 13% 18%;
    --ring: var(--tomato-soft);

    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-nunito;
    background: var(--gradient-bg);
    min-height: 100vh;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-nunito;
  }
}

@layer components {
  /* 治愈系按钮组件 */
  .btn-healing {
    @apply px-8 py-4 rounded-full font-semibold transition-all duration-300;
    @apply transform hover:scale-105 active:scale-95;
    background: var(--gradient-healing);
    box-shadow: var(--shadow-gentle);
    border: 1px solid hsl(var(--border) / 0.2);
  }
  
  .btn-healing:hover {
    box-shadow: var(--shadow-warm);
    background: var(--gradient-primary-soft);
  }
  
  .btn-primary {
    background: var(--gradient-primary-soft);
    @apply text-white hover:shadow-xl;
  }
  
  .btn-tomato {
    background: var(--gradient-warm);
    @apply text-white hover:shadow-xl;
  }

  /* 治愈系卡片 */
  .card-healing {
    background: var(--gradient-gentle);
    @apply backdrop-blur-sm rounded-3xl p-8 border border-border/30;
    box-shadow: var(--shadow-healing);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .card-healing:hover {
    box-shadow: var(--shadow-warm);
    @apply scale-[1.02] border-border/50;
  }

  /* 设置面板样式 */
  .settings-panel {
    background: var(--gradient-cool);
    @apply rounded-2xl p-6 border border-border/20;
    box-shadow: var(--shadow-gentle);
  }

  /* 滑块样式增强 */
  .slider-healing {
    @apply relative;
  }

  .slider-healing .slider-track {
    background: var(--gradient-healing);
    @apply h-3 rounded-full;
  }

  .slider-healing .slider-thumb {
    background: var(--gradient-warm);
    box-shadow: var(--shadow-gentle);
    @apply w-6 h-6 rounded-full border-2 border-white;
  }

  /* 模态框动画 */
  .modal-overlay {
    @apply fixed inset-0 bg-black/40 flex items-center justify-center px-4;
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(5px);
    transition: var(--transition-smooth);
    z-index: 50;
  }
  
  .modal-overlay.visible {
    opacity: 1;
    visibility: visible;
  }
  
  .modal-content {
    @apply bg-card rounded-3xl p-6 md:p-10 shadow-2xl transform translate-y-8 w-full max-w-6xl;
    transition: var(--transition-smooth);
    @apply border border-border/30;
    max-height: min(92vh, 800px);
    overflow-y: auto;
  }
  
  .modal-overlay.visible .modal-content {
    @apply translate-y-0;
  }

  /* SVG 番茄动画 */
  .tomato-progress {
    transition: var(--transition-smooth);
    filter: drop-shadow(0 8px 18px rgba(255, 138, 128, 0.35));
  }

  .tomato-wave-group {
    animation: tomatoWave 4.5s linear infinite;
  }

  .tomato-wave-group.fast {
    animation-duration: 3.5s;
    opacity: 0.7;
  }

  @keyframes tomatoWave {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

  /* Canvas 样式 */
  .pose-canvas {
    @apply rounded-3xl border border-border/40 shadow-lg;
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.1));
  }
}
